<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车类型</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <style>
        .okok{
            display: block;
            background-color: rebeccapurple;
            width: 20px;
            height: 20px;
            margin: 20px auto;
            animation: cha 3s infinite linear;
        }
        @keyframes cha{
            0%{
                transform: rotate(0deg);
                background-color: antiquewhite;
            }
            100%{
                transform: rotate(360deg);
                background-color: aqua;
            }
        }

        #myAlert{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            text-align: center;
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
    <script src="./js/jq.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script>

        let tidUpdate = null

        $(function () {
            loaddata()

            $("#myAlert").hide()

            $('#myModal').on('hidden.bs.modal', function (e) {
                // do something...
                //重置tid,回到新增状态
                tidUpdate = null
                $("#tid").val("")
                $("#name").val("")
                $("#tidbox").show()
            })
        })





        function loaddata() {
            $.getJSON("http://localhost:8080/cartype/all", function (res) {
                console.log(res)
                $("#list").empty()
                res.data.forEach(item => {
                    $("#list").append(`
                        <li>${item.tid}  ${item.name}
                            <button class="btn btn-primary" onclick="updateCartype(${item.tid})">修改</button>
                            <button class="btn btn-danger" onclick="delCartype(${item.tid})">删除</button>
                        </li>`)
                })
            })
        }

        function updateCartype(tid) {
            $("#loadingModal").modal('show')
            $.getJSON("http://localhost:8080/cartype/one/" + tid, function (res) {
                console.log(res)
                $('#myModal').modal('show')
                $("#loadingModal").modal('hide')
                $("#tid").val(tid)
                $("#name").val(res.data.name)
                tidUpdate = tid
            })
            // alert(tid)
            // location.href = 'cartypeEdit.html?tid='+tid
            // $('#myModal').modal('show')
        }

        function addCartype(){
            //设置为新增窗体
            tidUpdate = null
            $("#tidbox").hide()
            $("#myModal").modal('show')
        }

        function delCartype(tid) {
            if (confirm(`tid:${tid} 确认要删除吗?`)) {
                $.ajax({
                    url: 'http://localhost:8080/cartype/delete',
                    type: 'DELETE',
                    data: {
                        tid: tid
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        alert('删除成功')
                        loaddata()
                    }
                })
            }
        }

        function save() {
            let url = ''
            let data = null
            if(tidUpdate == null){
                url = 'http://localhost:8080/cartype/add'
                data = {
                    name: $("#name").val()
                }
            }else{
                url = 'http://localhost:8080/cartype/update'
                data = {
                    tid: tidUpdate,
                    name: $("#name").val()
                }
            }

            //修改
            $.post(url, data, function (res) {
                console.log(res)
                if (res.code == 200) {
                    // alert('修改成功')
                    $("#myAlert").show()
                    $('#myModal').modal('hide')
                    setTimeout(function (){
                        $("#myAlert").fadeOut('slow')
                    },3000)
                }
            })

        }


    </script>
</head>
<body>
<div class="container">
    <div id="myAlert" class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>提交成功！</strong>
    </div>
    <button type="button" class="btn btn-info" onclick="addCartype()">新增</button>
<!--    <a class="btn btn-primary btn-lg" href="cartypeEdit.html" role="button">新增</a>-->
    <ul id="list">
        <li>aaa235
            <button>修改</button>
            <button>删除</button>
        </li>
    </ul>
</div>

<!-- 模态框（Modal） -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog"
     tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    修改车类型信息
                </h4>
            </div>
            <div class="modal-body">
                <div id="tidbox">tid:<input id="tid"/></div>
                类型:<input id="name"/>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭
                </button>
                <button class="btn btn-primary" onclick="save()" type="button">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 加载状态 -->
<div class="modal" id="loadingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                    <span class="okok"></span>
                </div>
            </div>
        </div>
    </div>
</div>



</body>
</html>